<template>
<Card class="runtime" dis-hover>
	<div class="runtime-content">
		<Card dis-hover class="static-load-time">
			<Timeline>
				<TimelineItem>
					<p class="time">css加载耗时</p>
					<p class="content">{{ linksLoadTime }}ms</p>
				</TimelineItem>
				<TimelineItem>
					<p class="time">JavaScript加载耗时</p>
					<p class="content">{{ javaScriptLoadTime }}ms</p>
				</TimelineItem>
			</Timeline>
		</Card>
		<Card dis-hover class="static-load-list">
			<h6 slot="title">
				静态资源加载详情
			</h6>
			<a href="#" slot="extra">
				<Icon type="ios-loop-strong"></Icon>
				Change
			</a>
			<Tabs :animated="false">
				<TabPane label="CSS">
					<Table max-height="350" border :columns="columns" :data="staticData.links"></Table>
				</TabPane>
				<TabPane label="JavaScript">
					<Table max-height="350" border :columns="columns" :data="staticData.scripts"></Table>
				</TabPane>
			</Tabs>
		</Card>
	</div>
</Card>
</template>

<script>
import {
    getNewestStaticInfo
} from "@/apis/static";

import {
	unitConversion,
	compare
} from '@/lib/tools';
export default {
	name: 'runtime',
	data() {
		return {
			linksLoadTime: 0,
			javaScriptLoadTime: 0,
			columns: [{
					title: 'name',
					key: 'name'
				},
				{
					title: 'size',
					key: 'size',
					width: '120'
				},
				{
					title: 'loadTime',
					key: 'loadTime',
					width: '150'
				}
			],
			staticData: {
				links: [],
				scripts: []
			}
		}
	},
	mounted() {
		getNewestStaticInfo().then((result) => {
			console.log(result)
			let data = result.data;
			// 先排序
			data.sort(compare("size", "desc"));
			// 遍历再处理单位
			data.forEach(item => {
                item.loadTime = parseFloat(item.loadTime).toFixed(2) + 'ms';
    			item.size = unitConversion(item.size);
				if (item.type === "link") {
					this.linksLoadTime += parseFloat(item.loadTime);
					this.staticData.links.push(item);
				}
				if (item.type === "script") {
					this.javaScriptLoadTime +=  parseFloat(item.loadTime);
					this.staticData.scripts.push(item);
				}
			})
            this.linksLoadTime = this.linksLoadTime.toFixed(2);
            this.javaScriptLoadTime = this.javaScriptLoadTime.toFixed(2);
        })
	},
}
</script>

<style lang="less" scoped>
@import url('./style.less');
</style>
